<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:white;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view class="close-button" @click="$emit('update:show', false)">
      <wd-icon name="close" size="36rpx" color="#333333" />
    </view>
    <view class="title">
      请选择投诉原因
    </view>
    <view
      v-for="(item, index) in reasons[type]"
      :key="index"
      class="picker-item"
      @click="currentReason = item.value"
    >
      <view class="picker-content">
        {{ item.label }}
      </view>
      <v-icon
        v-if="currentReason === item.value"
        size="30rpx"
        :custom-style="{ marginTop: '20rpx' }"
        src="@/static/icons/order-details-picker-check.svg"
      />
    </view>
    <view class="submit-button-container">
      <v-button
        type="primary"
        :custom-style="{ height: '80rpx' }"
        @click="submitHandle"
      >
        确定
      </v-button>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean;
  reason?: string;
  type: 'DELIVERY' | 'PRODUCT' | 'CUSTOMER_SERVICE' | 'OTHER';
}>();

const emits = defineEmits<{
  'update:show': [val: boolean];
  'update:reason': [val: string];
}>();

const currentReason = ref<string>();
const reasons = {
  DELIVERY: [
    { label: '超时未发货', value: 'UNSHIPPED' },
    { label: '少发', value: 'LESS_SHIPPED' },
    { label: '错发', value: 'WRONG_SHIPPED' },
    { label: '虚假发货', value: 'SHAM_SHIPPED' }
  ],
  PRODUCT: [
    { label: '描述不符', value: 'DISCREPANCY_DESCRIPTION' },
    { label: '商品破损', value: 'DAMAGED' },
    { label: '质量问题', value: 'QUALITY_PROBLEM' }
  ],
  CUSTOMER_SERVICE: [
    { label: '客服不回复', value: 'CUSTOMER_SERVICE_NOT_REPLY' },
    { label: '客服不处理', value: 'CUSTOMER_SERVICE_NOT_PROCESS' },
    { label: '态度异常', value: 'ABNORMAL_ATTITUDE' }
  ],
  OTHER: [
    // #ifdef MP-ALIPAY
    { label: '支付宝举报', value: 'ALIPAY_REPORT' },
    // #endif
    { label: '小程序体验', value: 'MINI_PROGRAM_EXPERIENCE' }
  ]
};
watch(
  () => props.show,
  (val) => {
    if (val) {
      currentReason.value = props.reason;
    }
  }
);

const submitHandle = () => {
  if (currentReason.value) {
    emits('update:reason', currentReason.value);
  }
  emits('update:show', false);
};
</script>

<style lang="scss" scoped>
.back-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  text-align: center;
}

.picker-item {
  height: 90rpx;
  padding: 0 36rpx;
  display: flex;
  align-items: center;
  .picker-content {
    flex: 1;
    min-width: 0;
    .main {
      font-weight: bold;
    }
    .sub {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.submit-button-container {
  margin: 24rpx;
  padding: 10rpx 0;
}
</style>
